<html>
<head>
<title>Image Fit</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" ></script>
<script src="jquery.image-fit-1.0.js" type="text/javascript" ></script>
<style type="text/css">
table{width:100%;}
.container1,
.container2,
.container3{
  margin:10px;
  border:2px #ddd solid;
  float:left;
  background-color:#ccc;
}

.container4,
.container5{
  margin:10px;
  border:2px #ddd solid;
  background-color:#ccc;
}


.container1{
  width:120px;
  height:80px;
}

.container2{
  width:80px;
  height:120px;
}
.container3{
  width:120px;
  height:120px;
}
.container4{
  width:120px;
}

.container5{
  height:120px;
}


</style>

<script type="text/javascript">
$(document).ready(function(){

    $(".switch").change(function(){
      var suffix = $(this).val();
      
      $("img.h").attr("src","img/horizontal-"+suffix+".png").load(function(){
           if($(this).hasClass("fit")){
              $(this).imageFit("fit");
           }       
           if($(this).hasClass("pan")){
              $(this).imageFit("pan");
           }       
      });
      
      $("img.v").attr("src","img/vertical-"+suffix+".png").load(function(){
         if($(this).hasClass("fit")){
             $(this).imageFit("fit");
          }       
          if($(this).hasClass("pan")){
             $(this).imageFit("pan");
          }       
      });
      
      $("img.s").attr("src","img/square-"+suffix+".png").load(function(){
             if($(this).hasClass("fit")){
                 $(this).imageFit("fit");
              }       
              if($(this).hasClass("pan")){
                 $(this).imageFit("pan");
              }       
        });
       
       $("img.i").attr("src","img/icon-"+suffix+".png").load(function(){
               if($(this).hasClass("fit")){
                   $(this).imageFit("fit");
                }       
                if($(this).hasClass("pan")){
                   $(this).imageFit("pan");
                }       
       });
    });

    var resizeTimer=null;
    $(window).resize(function(){
        if(resizeTimer){
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function(){
	        $("img").each(function(){
	               if($(this).hasClass("fit")){
	                   $(this).imageFit("fit");
	                }       
	                if($(this).hasClass("pan")){
	                   $(this).imageFit("pan");
	                }       
	        });
        }, 50);
    });

    $(".switch").change();
});
</script>
</head>
<body>
<h1>Image scaling plugin test containers I,II,III(with fixed both dimentions)</h1>
<p>Below results of 3 images (different shapes ) being scaled to fit into 3 different boxes, using 2 different method.</p>
Switch to different image set
<select class="switch">
    <option value="flower" selected="selected">flowers</option>
    <option value="ugly" >boxes</option>
    <option value="animal">giraffas</option>
    <option value="mountain">mountain</option>
</select>

<p>Download <a href="http://code.google.com/p/image-fit/">here</a></p>

<table border="1">
<tr>
  <th style="width:10%;">Image</th>
  <th style="width:45%;">Scale pan containers: I(120x80), II(80x120), III(80x80)</th>
  <th style="width:45%;">Scale fit containers: I(120x80), II(80x120), III(80x80)</th>
<tr>
<tr>
  <td>A long width image</td>
  <td>
        <div class="container1" ><img class="scale pan h" src="img/horizontal-ugly.png" /></div>
        <div class="container2" ><img class="scale pan h" src="img/horizontal-ugly.png" /></div>
        <div class="container3" ><img class="scale pan h" src="img/horizontal-ugly.png" /></div>
  </td>
  <td>
      <div class="container1" ><img class="scale fit h" src="img/horizontal-ugly.png" /></div>
      <div class="container2" ><img class="scale fit h" src="img/horizontal-ugly.png" /></div>
      <div class="container3" ><img class="scale fit h" src="img/horizontal-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>B long height image</td>
  <td>
        <div class="container1" ><img class="scale pan v" src="img/vertical-ugly.png" /></div>
        <div class="container2" ><img class="scale pan v" src="img/vertical-ugly.png" /></div>
        <div class="container3" ><img class="scale pan v" src="img/vertical-ugly.png" /></div>
  </td>
  <td>
        <div class="container1" ><img class="scale fit v" src="img/vertical-ugly.png" /></div>
        <div class="container2" ><img class="scale fit v" src="img/vertical-ugly.png" /></div>
        <div class="container3" ><img class="scale fit v" src="img/vertical-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>C square image</td>
  <td>
        <div class="container1" ><img class="scale pan s" src="img/square-ugly.png" /></div>
        <div class="container2" ><img class="scale pan s" src="img/square-ugly.png" /></div>
        <div class="container3" ><img class="scale pan s" src="img/square-ugly.png" /></div>
  </td>
  <td>
        <div class="container1" ><img class="scale fit s" src="img/square-ugly.png" /></div>
        <div class="container2" ><img class="scale fit s" src="img/square-ugly.png" /></div>
        <div class="container3" ><img class="scale fit s" src="img/square-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>D small icon picture</td>
  <td>
    <div class="container1" ><img class="scale pan i" src="img/icon-ugly.png" /></div>
    <div class="container2" ><img class="scale pan i" src="img/icon-ugly.png" /></div>
    <div class="container3" ><img class="scale pan i" src="img/icon-ugly.png" /></div>
  </td>
  <td>
    <div class="container1" ><img class="scale fit i" src="img/icon-ugly.png" /></div>
    <div class="container2" ><img class="scale fit i" src="img/icon-ugly.png" /></div>
    <div class="container3" ><img class="scale fit i" src="img/icon-ugly.png" /></div>
  </td>
<tr>



</table>
<hr style="clear:both;">
<h1>Image scaling plugin test containers IV,V(with fixed one dimentions)</h1>
<table border="1">
<tr>
  <th  style="width:10%;">Image</th>
  <th  style="width:45%;">Scale pan containers: IV(120x"auto"), V("auto"x120)</th>
  <th  style="width:45%;">Scale fit containers:  IV(120x"auto"), V("auto"x120)</th>
<tr>
<tr>
  <td>A long width image</td>
  <td>
    <div class="container4" ><img class="scale pan h" src="img/horizontal-ugly.png" /></div>
    <div class="container5" ><img class="scale pan h" src="img/horizontal-ugly.png" /></div>
  </td>
  <td>
    <div class="container4" ><img class="scale fit h" src="img/horizontal-ugly.png" /></div>
    <div class="container5" ><img class="scale fit h" src="img/horizontal-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>B long height image</td>
  <td>
    <div class="container4" ><img class="scale pan v" src="img/vertical-ugly.png" /></div>
    <div class="container5" ><img class="scale pan v" src="img/vertical-ugly.png" /></div>
  </td>
  <td>
    <div class="container4" ><img class="scale fit v" src="img/vertical-ugly.png" /></div>
    <div class="container5" ><img class="scale fit v" src="img/vertical-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>C square image</td>
  <td>
    <div class="container4" ><img class="scale pan s" src="img/square-ugly.png" /></div>
    <div class="container5" ><img class="scale pan s" src="img/square-ugly.png" /></div>
  </td>
  <td>
    <div class="container4" ><img class="scale fit s" src="img/square-ugly.png" /></div>
    <div class="container5" ><img class="scale fit s" src="img/square-ugly.png" /></div>
  </td>
<tr>
<tr>
  <td>D small icon picture</td>
  <td>
    <div class="container4" ><img class="scale pan i" src="img/icon-ugly.png" /></div>
    <div class="container5" ><img class="scale pan i" src="img/icon-ugly.png" /></div>
  </td>
  <td>
    <div class="container4" ><img class="scale fit i" src="img/icon-ugly.png" /></div>
    <div class="container5" ><img class="scale fit i" src="img/icon-ugly.png" /></div>
  </td>
<tr>

</table>



<h2>How to use the plugin </h2>
<p>When image is already loaded</p>
<pre>
$("img").imageFit('fit|pan');
</pre>

<p>When you want to trigger scaling onload</p>
<pre>
$("img").load(function(){
    $(this).imageFit('fit|pan');
});
</pre>
<p>or inline </p>
<pre>
function imageFit(mode){
    $(this).imageFit(mode);
}

&lt;img onload="imageFit(this,\'fit|pan\')" src="img/square-ugly.png" /&gt;
</pre>
<p>If you want to trigger scaling everytime page is resized</p>
<pre>
$(window).resize(function(){
    $("img").each(function(){
        $(this).imageFit("fit|pan");
    });
});
</pre>

<hr style="clear:both;">
<h2>Containers</h2>

    <div class="container1" >I w=120, h=80</div>
    <div class="container2" >II w=80, h=120</div>
    <div class="container3" >III w=h=80</div>
    <div style="clear:both;"></div>
    <div class="container4" >IV w=120 h=auto</div>
    <div class="container5" >V w=auto h=120</div>

<div style="clear:both;"></div>
<h2>Oryginal pictures no scaling</h2>
    <img class="noscale v" src="img/vertical-ugly.png" />
    <img class="noscale h" src="img/horizontal-ugly.png" />
    <img class="noscale s" src="img/square-ugly.png" />
    <img class="noscale i" src="img/icon-ugly.png" />
<p>Note: pictures taken from:</p>
boxes:<br />
hand made by the author ;-)<br/> 
flowers:<br />
http://commons.wikimedia.org/wiki/File:Aster_Tataricus.JPG<br/>
http://commons.wikimedia.org/wiki/File:Gentiana-clusii-ClusiusEnzian.jpg<br/>
http://commons.wikimedia.org/wiki/File:Primula_aka.jpg<br/>
giraffas:<br/>
http://commons.wikimedia.org/wiki/File:Giraffa_camelopardalis_tippelskirchi_2.JPG<br/>
http://commons.wikimedia.org/wiki/File:South_African_Giraffes,_fighting.jpg<br/>
http://commons.wikimedia.org/wiki/File:Giraffe_1.jpg<br/>
mountains:<br/>
http://commons.wikimedia.org/wiki/File:ApproachingNangaParbat.JPG<br/>
http://commons.wikimedia.org/wiki/File:Masherbrum.jpg<br/>
http://commons.wikimedia.org/wiki/File:Mount_Wilhelm.jpg<br/>
</body>
</html>